<!-- 选择的规格 -->
<template>
	<view class="container">
		<view class="content" @click="handleChooseCombo()">
			<text class="label">已选择：</text>
			<text class="value">500ml</text>
			<text class="iconfont">&#xe61a;</text>
		</view>
	</view>
</template>

<script setup>
	import { useGoodsDetailStore } from '../store.js';

	// 选择规格
	const handleChooseCombo = () => {
		useGoodsDetailStore().SHOW_COMBO_PANEL();
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 25rpx 0;

		.content {
			display: flex;
			align-items: center;
			height: 100rpx;
			background-color: white;
			border-radius: 20rpx;
			padding: 0 20rpx 0 30rpx;
			color: #222222;

			.label {
				flex-shrink: 0;
				font-weight: 500;
				font-size: 28rpx;
			}

			.value {
				flex-grow: 1;
				width: 0;
				font-weight: 500;
				font-size: 28rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.iconfont {
				flex-shrink: 0;
				font-size: 28rpx;
			}
		}
	}
</style>